<template>
  <div>
    <z-header>购物车</z-header>
    <section class="shopcart-page">
      <div class="shopcart-list">
        <shopcart-box class="shopcartList" :cartList="cartList"></shopcart-box>
      </div>
    </section>
    <van-submit-bar 
        :price="this.$store.getters.getBadgeCount.allPrice" 
        button-text="提交订单" 
        @submit="onSubmit" 
        v-if="cartList.length>0"
    >
        <van-checkbox :value="allChecked" checked-color="#F63515" @click="checkAll">全选</van-checkbox>
    </van-submit-bar>
    <div v-else>
        <div class="shopcart-empty">
            <img src="//img11.360buyimg.com/jdphoto/s180x180_jfs/t18163/292/540553659/74408/adeb7463/5a93c51cN3bb5e37b.png">
            <p>购物车空空如也，去逛逛吧~</p>
        </div>
    </div>
    <recomm-box>可能你还想要</recomm-box>
    <!-- tabbar区域 -->
    <tabBar :active="2"></tabBar>
  </div>
</template>
<script>
import recommBox from "@/components/recomm-box.vue";
import tabBar from "@/components/tabBar.vue";
import zHeader from "@/components/z-header.vue";
import shopcartBox from "@/components/shopcart-box";
import { mapState } from "vuex";
export default {
  components: {
    recommBox,
    tabBar,
    zHeader,
    shopcartBox
  },
  data() {
    return {
      recommendList: [], // 存储推荐商品
    };
  },
  computed: {
    ...mapState(["cartList", "allChecked"]),
  },
  methods: {
    //获取购物车数据
    CartData(){
      this.$store.dispatch("getCartData");
    },
    //全选---未写
    checkAll(){
       this.$store.dispatch('changAllChecked')  
    },
    //提交订单--未写
    onSubmit(){

    }
  },
  created() {
    this.CartData();
 
  },
 
};
</script>
<style lang="scss" scoped>
// 公共样式
@import "../../common/style/mixin";
// 单独样式
@import '../../css/shopcart';
</style>